<template>
  <!--<div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>-->
  <div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button>其它</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-input v-model="query.search" placeholder=" 请 输 入 关 键 字 " style="width:30%"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="handleSearchClick">查询</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column sortable prop="id" label="编号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="maker" label="厂商" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="sales" label="销量" />
      <el-table-column prop="stock" label="库存" />
      <el-table-column>
        <template #header>
          <el-button type="text" style="width: 100%" disabled>操作</el-button>
        </template>
        <template #default="scope">
          <el-button type="warning" @click="handleEdit(scope.row)">修改</el-button>

          <el-popconfirm
                  title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
              @size-change="handlePageSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.pageNum"
              :page-sizes="[5,10,15]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="query.total">
      </el-pagination>
    </div>

    <el-dialog
            v-model="dialogVisible"
            :title="saveTitle"
            width="35%"
    >
      <el-form :rules="rules" :model="form" ref="form" label-width="120px">
        <el-form-item label="家居名称" prop="name">
          <el-input v-model="form.name" style="width: 70%" />
          &nbsp;&nbsp;{{validMsg.name}}
        </el-form-item>
        <el-form-item label="家居厂商" prop="maker">
          <el-input v-model="form.maker" style="width: 70%" />
          &nbsp;&nbsp;{{validMsg.maker}}
        </el-form-item>
        <el-form-item label="家居价格" prop="price">
          <el-input v-model="form.price" style="width: 70%" />
          &nbsp;&nbsp;{{validMsg.price}}
        </el-form-item>
        <el-form-item label="家居销量" prop="sales">
          <el-input v-model="form.sales" style="width: 70%" />
          &nbsp;&nbsp;{{validMsg.sales}}
        </el-form-item>
        <el-form-item label="家居库存" prop="stock">
          <el-input v-model="form.stock" style="width: 70%" />
          &nbsp;&nbsp;{{validMsg.stock}}
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'
import request from "@/utils/request";
import {addFurn,listFurn, editFurn, deleteFurn, pageFurn, listSearch} from '@/api/system/furn'

export default {
  name: 'HomeView',
  data() {
    return {
      /*pageNum: 1,
      pageSize: 5,
      total: 20,*/
      validMsg: {},
      query: {
        pageNum: 1,
        pageSize: 5,
        total: 20,
        search: ""
      },
      dialogVisible: false,
      form: {},
      tableData: [],
      saveTitle: "添加家居信息",
      rules: {
        name: [
          {required: true, message: '家居名称不能为空', trigger: 'blur'}
        ],
        maker: [
          {required: true, message: '厂商不能为空', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '价格不能为空', trigger: 'blur'},
          {pattern: /^(([1-9]\d*)|(0))(\.\d+)?$/, message: '请输入正定点数', trigger: 'blur'}
        ],
        sales: [
          {required: true, message: '销量不能为空', trigger: 'blur'},
          {pattern: /^(([1-9]\d*)|(0))$/, message: '请输入正整数', trigger: 'blur'}
        ],
        stock: [
          {required: true, message: '库存不能为空', trigger: 'blur'},
          {pattern: /^(([1-9]\d*)|(0))$/, message: '请输入正整数', trigger: 'blur'}
        ],
      }
    }
  },
  components: {
    //HelloWorld
  },
  methods: {
    handleSearchClick(){
      //这里其实点击查询可以直接调用list方法
      this.list();
    },
    handlePageSizeChange(pageSize){
      this.query.pageSize = pageSize;
      this.list();
    },
    handleCurrentChange(pageNum){
      this.query.pageNum = pageNum;
      this.list();
    },
    onSubmit() {
      console.log("form的值", this.form);
    },
    handleDelete(id){
      deleteFurn(id).then(res => {
        this.list();
      })
    },
    handleEdit(row){
      // console.log(row.id)
      this.saveTitle = "修改家居信息";
      this.form = {...row};
      this.dialogVisible = true;
    },
    add() {
      this.saveTitle = "添加家居信息";
      this.dialogVisible = true;
      this.form = {};
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if(valid){
          if(this.form.id){
            editFurn(this.form).then(res => {
              console.log(res);
              this.list();
            });
            this.dialogVisible = false;
          }else{
            addFurn(this.form).then(res => {
              console.log(res);
              if(res.data){
                this.validMsg = res.data;
              }else{
                this.dialogVisible = false;
              }
              this.list();
            });
          }

        }else{
          this.$message({//弹出更新失败信息
            type: "error", message: "验证失败，不提交"
          })
        }
      })
    },
    cancel(){
      this.dialogVisible = false;
      this.form = {}
    },
    list(){
      listSearch(this.query).then(res => {
        console.log(res);
        this.tableData = res.data.records;
        this.query.total = res.data.total;
      })
    }
    /*list(){
      pageFurn(this.query).then(res => {
        console.log(res);
        this.tableData = res.data.records;
        this.query.total = res.data.total;
      })
    }*/
    /*list(){
      listFurn().then(res => {
        console.log(res);
        this.tableData = res.data;
      })
    }*/
  },
  created() {
    this.list();
  }
}
</script>
